<template>
    <div>
        <el-popover placement="bottom" title="通知" width="350" trigger="click" v-model="show">
            <el-empty v-if="this.total == 0" description="无未读消息通知"></el-empty>
            <div v-loading="loading">
                <div class="item" v-for="(item, index) in noticeList" :key="index">
                    <div class="flex">
                        <span class="title">{{ item.title }}</span>
                        <el-tag v-if="item.isRead == 1" size="mini">{{ item.isRead == "1" ? "未读" : "已读" }}</el-tag>
                        <el-tag v-if="item.isRead == 2" type="success" size="mini">{{ item.isRead == "1" ? "未读" :
                            "已读" }}</el-tag>
                    </div>
                    <div class="content">
                        <p>
                            {{ item.content }}
                        </p>

                    </div>


                </div>



                <div class="pag">
                    <el-pagination :page-count="pageCount" :hide-on-single-page="value" small
                        layout="total,prev, pager, next" :total="total" :page-size=pageSize
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
                <div class="bottom">
                    <el-link :underline="false" @click="allRead">全部设为已读</el-link>
                    <el-link :underline="false">查看全部</el-link>
                </div>
            </div>
            <div class="notice" slot="reference" @click="getNoticeList">
                <el-badge v-if="this.notRead > 0" :value='notRead' :max="99">
                    <i class="el-icon-message-solid"></i>
                </el-badge>
                <i v-else class="el-icon-message-solid"></i>
            </div>
        </el-popover>
    </div>
</template>

<script>
export default {
    name: "notice",
    data() {
        return {
            value: false,
            show: false,
            total: 1,           //总条数
            pageSize: 3,
            pageCount: 0,        //总页数
            currPage: 1,
            noticeList: [],
            loading: false,
            All: false,
            notRead: 0,
            // tagType
        };
    },
    mounted() {
        console.log("this.$route.path = ", this.$route.path)
        setTimeout(() => {
            // console.log("3秒后的为：", this.$route.path)
            if (this.$route.path == '/' || this.$route.path == '/login');
            else this.getNoticeList()
        }, 2000)

    },
    watch: {
        '$route'(to, from) {
            // console.log('执行了watch,from为： ' + from.path)
            if (from.path === '/login') {
                // 如果来自 '/login' 路由，则调用
                this.getNoticeList();
            }
        }
    },
    methods: {

        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currPage = val
            this.getNoticeList()

        },
        allRead() {
            this.All = true
            this.getNoticeList()
            this.All = false

        },
        async getNoticeList(bo) {
            this.loading = true
            let res = await this.$store.dispatch("GetNoticeList", {
                pageSize: this.pageSize,
                currPage: this.currPage,
                isAll: this.All
            });
            setTimeout(() => {
                this.loading = false
            }, 100)

            if (res.success) {
                this.noticeList = res.data.list
                this.total = res.data.totalCount
                this.notRead = res.data.count
                if (this.total < this.pageSize) {
                    this.value = true
                }

            } else {
                this.$message({
                    message: "获取通知失败",
                    type: "error"
                });
            }
        },
    },
};
</script>

<style scoped>
.item {
    margin: 10px 0;
}

.notice {
    height: 15px;
    width: 15px;
    /* text-align: center; */
    align-items: center;
    justify-content: center;
    display: flex;
    margin-right: 20px;
    background-color: #f1f3f8;
    border-radius: 50%;
    padding: 5px;
    color: #454d5a;
    cursor: pointer;
}

.title {
    font-size: 16px;
    font-weight: 600;
}

.content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}

.pag {
    text-align: center;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom {
    border-top: 1px solid #ebeef5;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-content: center;
}
</style>